<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"
          rel="stylesheet">
    <link href="../../assetsimages/x-icon/agricul.png" rel="shortcut icon" type="image/x-icon">
    <link href="../../assets/css/relys/animate.css" rel="stylesheet">
    <link href="../../assets/css/relys/bootstrap.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/all.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/icofont.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/lightcase.css" rel="stylesheet">
    <link href="../../assets/css/relys/swiper.min.css" rel="stylesheet">
    <link href="../../assets/css/relys/style.css" rel="stylesheet">
    <style type="text/css">
        .product-content a {
            width: 100%;
        }

        .product-content a h5 {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .product-thumb {
            width: 100%;
            height: 0;
            padding-top: 60%;
            position: relative;
        }

        .post-thumb {
            position: relative;
            height: 0;
            padding-top: 100%;
        }

        .product-thumb img, .post-thumb a img {
            width: 100%;
            position: absolute;
            top: 0;
            object-fit: cover;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- Banner Section Start Here -->
    <section class="banner banner-2" v-if="banners.length>0">
        <div class="banner-slider" style="height: 500px;">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in banners">
                    <div class="container">
                        <div class="banner-item">
                            <div class="banner-inner">
                                <div class="banner-thumb">
                                    <img :src="item.value" alt="banner-slider"
                                         style="width: 100%;height: 100%;object-fit: cover;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
            <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
            <div class="banner-pagination"></div>
        </div>
    </section>
    <!-- Banner Section Ending Here -->
    <!-- product section start here -->
    <section class="product-section product-style2 padding-tb" style="padding-bottom: 0;">
        <div class="container">
            <div class="section-header">
                <h3>招聘岗位推荐</h3>
                <p @click="onPageTap('../zhaopinxinxi/list.html')">查看更多</p>
            </div>
            <div class="section-wrapper">
                <div class="row">
                    <div class="col-lg-3 col-md-6 col-12" v-for="(item, i) in zhaopinxinxiList">
                        <div class="product-item-2">
                            <div class="product-inner">
                                <div class="product-thumb" v-if="item.tupian">
                                    <img :src="item.tupian.split(',')[0]" alt="product">
                                </div>
                                <div class="product-content">
                                    <a :href="`javascript: onPageTap('../zhaopinxinxi/detail.html?id=${item.id}')`">
                                        <h5>{{item.zhaopingangwei}}</h5>
                                    </a>
                                    <div class="cart-option">
                                        <a :href="`javascript: onPageTap('../zhaopinxinxi/detail.html?id=${item.id}')`"
                                           class="lab-btn"><span>查看详情</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center">
                    <a class="lab-btn"
                       href="javascript: onPageTap('../zhaopinxinxi/list.html')"><span>查看更多</span></a>
                </div>
            </div>
        </div>
    </section>
    <section class="product-section product-style2 padding-tb" style="padding-bottom: 0;">
        <div class="container">
            <div class="section-header">
                <h3>求职者信息</h3>
                <p @click="onPageTap('../qiuzhizhexinxi/list.html')">查看更多</p>
            </div>
            <div class="section-wrapper">
                <div class="row">
                    <div class="col-lg-3 col-md-6 col-12" v-for="(item, i) in qiuzhizhexinxiList">
                        <div class="product-item-2">
                            <div class="product-inner">
                                <div class="product-thumb" v-if="item.zhaopian">
                                    <img :src="item.zhaopian.split(',')[0]" alt="product">
                                </div>
                                <div class="product-content">
                                    <a :href="`javascript: onPageTap('../qiuzhizhexinxi/detail.html?id=${item.id}')`">
                                        <h5>{{item.xingming}}</h5>
                                    </a>
                                    <div class="cart-option">
                                        <a :href="`javascript: onPageTap('../qiuzhizhexinxi/detail.html?id=${item.id}')`"
                                           class="lab-btn"><span>查看详情</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center">
                    <a class="lab-btn" href="javascript: onPageTap('../qiuzhizhexinxi/list.html')"><span>查看更多</span></a>
                </div>
            </div>
        </div>
    </section>
    <section class="blog-section padding-tb">
        <div class="container">
            <div class="section-header">
                <h3>新闻资讯</h3>
                <p>News And Information</p>
            </div>
            <div class="section-wrapper">
                <div class="row justify-content-center">
                    <div :key="i" class="col-xl-4 col-md-6 col-12" v-for="(item, i) in news">
                        <div class="post-item">
                            <div class="post-inner">
                                <div class="post-thumb">
                                    <a :href="`javascript: onPageTap('../news/news-detail.html?id=${item.id}&tablename=news')`"><img
                                            :src="item.picture" alt=""/></a>
                                    <div class="meta-date">
                                        <div class="md-pre">
                                            <h5>ORDER</h5>
                                            <p>{{i + 1}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="post-content">
                                    <a :href="`javascript: onPageTap('../news/news-detail.html?id=${item.id}&tablename=news')`">
                                        <h5>{{item.title}}</h5>
                                    </a>
                                    <div class="text-btn">
                                        <a :href="`javascript: onPageTap('../news/news-detail.html?id=${item.id}&tablename=news')`"
                                           class="read-more">阅读更多</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- newsletters section start here -->
    <div class="newsletter-section">
        <div class="container">
            <div class="row justify-content-lg-between justify-content-center align-items-center">
                <div class="col-lg-6 col-12">
                    <div class="newsletter-title">
                        <h4>写下您的留言</h4>
                    </div>
                </div>
                <div class="col-lg-6 col-12">
                    <div class="newsletter-form">
                        <form @submit.prevent="liuyanTap" class="d-flex flex-wrap">
                            <input class="input-email" placeholder="留言内容" type="text" v-model="liuyan">
                            <input class="subscribe-btn" type="submit" value="留言">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- newsletters section ending here -->
</div>
<script src="../../assets/js/relys/jquery.js"></script>
<script src="../../assets/js/relys/wow.min.js"></script>
<script src="../../assets/js/relys/swiper.min.js"></script>
<script src="../../assets/js/relys/fontawesome.min.js"></script>
<script src="../../assets/js/relys/bootstrap.min.js"></script>
<script src="../../assets/js/relys/vue.js"></script>
<script src="../../assets/js/api/api.js"></script>
<script src="../../assets/js/api/shop.js"></script>
<script src="../../assets/js/api/tplist.js"></script>
<script src="../../assets/js/api/defaultuser.js"></script>
<div id="script"></div>
</body>
<script type="text/javascript">
    function onPageTap(url) {
        window.location.href = url;
    }

    var app = new Vue({
        el: "#app",
        data: {
            banners: [],
            zhaopinxinxiList: [],
            qiuzhizhexinxiList: [],
            news: [],
            liuyan: "",
        },
        methods: {
            onPageTap(url) {
                window.location.href = url;
            },
            liuyanTap() {
                var sessiontable = localStorage.getItem("sessionTable")
                if (!sessiontable) {
                    alert("您还没登录，请先登录")
                    return
                }
                session(sessiontable, (res) => {
                    if (res.code == 0) {
                        var obj = {
                            "content": this.liuyan,
                            "userid": localStorage.getItem("userid")
                        }
                        httpJson("messages/add", "POST", obj, (res) => {
                            if (res && res.code == 0) {
                                alert("留言成功")
                            }
                        })
                    }
                })

            },
        },
        created() {
            tpPage("config", (res) => {
                this.banners = res.data.list
                if (this.banners.length == 0) {
                    this.banners.push({value: "../../assets/images/banner/01.jpg"})
                } else {
                    this.banners.forEach(item => {
                        if (!item.value) {
                            item.value = "../../assets/images/banner/01.jpg"
                        }
                    })
                }
                this.$nextTick(() => {
                    var swiper = new Swiper('.banner-slider', {
                        slidesPerView: 1,
                        autoplay: {
                            autoplay: true,
                            delay: 5000,
                            disableOnInteraction: false,
                        },
                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                        pagination: {
                            el: '.banner-pagination',
                            clickable: true,
                        },
                        loop: true,
                    });
                })
            })
            tplist("news", 1, 100, false, false, (res) => {
                this.news = res.data.list
            })
            recommend('zhaopinxinxi', false, (res) => {
                if (res.code == 0) {
                    this.zhaopinxinxiList = res.data.list
                }
            })
            recommend('qiuzhizhexinxi', false, (res) => {
                if (res.code == 0) {
                    this.qiuzhizhexinxiList = res.data.list
                }
            })
            this.recommend = null
            this.recommend = null
            this.recommend = null
            this.recommend = null
            this.recommend = null
            this.recommend = null
            this.recommend = null
            this.recommend = null
        }
    })
</script>
</html>
